<template>
  <div class="wrapper">
    <ul class="versions">
      <li class="electron-version">Electron v{{ versions.electron }}</li>
      <li class="chrome-version">Chromium v{{ versions.chrome }}</li>
      <li class="node-version">Node v{{ versions.node }}</li>
      <li class="v8-version">V8 v{{ versions.v8 }}</li>
    </ul>
    <div class="resource-box">
      <div class="label">自定义协议读取资源</div>
      <!-- <img src="myapp://../assets/imgs/boy.png" alt="" /> -->
      <!-- <img :src="'myapp://' + src" alt="" /> -->
      <!-- <img :src="src" alt="" /> -->
      <!-- <img :src="'myapp' + src" alt="" />
      <img :src="'myapp:' + src" alt="" />
      <img :src="'myapp://' + src" alt="" />
      <img :src="'myapp:///' + src" alt="" /> -->
      <div>
        <!-- <video
          id="videoId"
          src="myapp://src/assets/videos/testVideo.mp4"
          controls
          preload="auto"
        ></video> -->
      </div>
    </div>
    <div class="show-box">
      <div class="list-box">
        <div class="label">获取后端数据列表</div>
        <el-button type="primary" @click="clickMenu">点击</el-button>
        <div class="list">
          <div class="item" v-for="item in list" :key="item.id">
            {{ item.id + '：' + item.name }}
          </div>
        </div>
      </div>
      <div>
        <div class="label">设置嵌套窗口</div>
        <el-button type="primary" @click="clickNestWindow">点击</el-button>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
// import src from '@/assets/imgs/boy.png'
import { getMenusApi } from '@/api/loginApi/index.js'
onMounted(() => {
  console.log('version-mounted')
  window.api.apiSendError((arg) => {
    console.log('apiSendError', arg)
  })
})
const versions = reactive({ ...window.electron.process.versions })
const list = ref([])
const clickMenu = () => {
  getMenusApi({ role: 'user' })
    .then((res) => {
      list.value = res.data
      console.log(list)
    })
    .catch(() => {})
}
const clickNestWindow = () => {
  window.api.apiCreateNestWindow()
}
</script>
<style lang="scss" scoped>
.wrapper {
  padding-left: 10px;
}
.versions {
  li {
    color: #0000ff;
  }
}
.show-box {
  display: flex;
  .label {
    margin: 10px 0;
    font-size: 16px;
    color: #0000ff;
    font-weight: 600;
  }
  .list-box {
    width: 400px;
    .list {
      margin: 10px;
    }
  }
}
</style>
